@use 'sass:color';
@use 'sass:map';

// 主题变量
$themes: (
  light: (
    primary-color: #409EFF,
    primary-color-light: #66b1ff,
    primary-color-rgb: '64, 158, 255',
    success-color: #67c23a,
    success-color-light: #85ce61,
    success-color-rgb: '103, 194, 58',
    warning-color: #e6a23c,
    warning-color-light: #ebb563,
    warning-color-rgb: '230, 162, 60',
    danger-color: #f56c6c,
    danger-color-light: #f78989,
    danger-color-rgb: '245, 108, 108',
    info-color: #909399,
    bg-color: #f5f7fa,
    card-bg-color: #ffffff,
    border-color: #dcdfe6,
    text-color: #303133,
    text-secondary-color: #606266
  ),
  dark: (
    primary-color: #409EFF,
    primary-color-light: #66b1ff,
    primary-color-rgb: '64, 158, 255',
    success-color: #67c23a,
    success-color-light: #85ce61,
    success-color-rgb: '103, 194, 58',
    warning-color: #e6a23c,
    warning-color-light: #ebb563,
    warning-color-rgb: '230, 162, 60',
    danger-color: #f56c6c,
    danger-color-light: #f78989,
    danger-color-rgb: '245, 108, 108',
    info-color: #909399,
    bg-color: #1a1b20,
    card-bg-color: #25262b,
    border-color: #2d2e33,
    text-color: #e0e0e0,
    text-secondary-color: #a7a9b2
  )
);

// 主题混入
@mixin themed() {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      @each $key, $value in $map {
        --#{$key}: #{$value};
      }
      @content;
    }
  }
}

// 主题变量获取函数
@function t($key) {
  @return var(--#{$key});
}

// 通用变量
$spacing-mini: 4px;
$spacing-small: 8px;
$spacing-base: 16px;
$spacing-large: 24px;
$spacing-huge: 32px;

$border-radius-small: 2px;
$border-radius-base: 4px;
$border-radius-large: 8px;
$border-radius-circle: 50%;

$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);

$transition-base: all 0.3s ease-in-out;
$transition-fast: all 0.2s ease-in-out;
$transition-slow: all 0.4s ease-in-out; 